<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Election Exchange Map</title>
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};
$(function() {
    $("#create_map").click(function() {
        var title = $("#title").val();
        var type = $("#type").val();
        var dataString = 'a=true&c=create&title='+ title + '&type=' + type;
    
        if(title==''){
            showMsg("Please enter value for map name.","error");  
        } else if(!isAlphaNumeric(title)) {
        	showMsg("Map name specified contains invalid character(s).","error");
        }else{
            $("#flash").show();
            $("#flash").fadeIn(400);
            $.ajax({
                type: "GET",
                url: "map",
                data: dataString,
                cache: false,
                success: function(html){
                    var resid = "resid=" + html;
	                $.ajax({
	                    type: "POST",
	                    url: "main",
	                    data: resid,
	                    cache: false,
	                    success: function(html){
                            document.getElementById('title').value='';
                            $("#flash").hide();
	                        $("table#update").append(html);
	                        $("table#update tr").slideDown("slow");
	                        showMsg("New map was created.","normal");
	                    }
	                });
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    window.open("./","_self");
                }
            });
        }
        return false;
    });
});
function remove(id) {
    var data = 'a=true&c=delete&resid='+id;
    var parent = $("#"+id);
    document.getElementById(id).style.backgroundColor="#fb6c6c";
    if(confirm("Delete this map?")){
        $("#flash").show();
        $("#flash").fadeIn(400);
        $.ajax({
            type: "get",
            url: "map",
            data: data,
            success: function() {
                $("#flash").hide();
                parent.fadeOut("slow",function() {
                   $(this).remove();
                   showMsg("Map deleted.","normal");
                });
            }
        });
    }else {
        document.getElementById(id).style.backgroundColor="#ffffff";
    }    
}
function isAlphaNumeric(alphanumericChar){
    if(alphanumericChar.search(/[^a-zA-Z0-9 ]/g) != -1 ){
        return false;
    } else {
        return true;
    }
}
function showMsg(msg, type){
    $("#msg_area").html("<span id='msg' class='"+type+"'>"+msg+"</span>");
    $("#msg").pause(2000).fadeOut("slow");  
}
</script>

<style type="text/css">
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}
.comment_box{
    background-color:#FFD700;
}
a{
    text-decoration:none;
    color:#d02b55;
}
a:hover{
    text-decoration:underline;
    color:#d02b55;
}
*{
    margin:0;
    padding:0;
}
table.timeline{
    background-color:#D3D3D3;
    font-size:1.2em;
    text-align: center;
}
table.timeline th{
    color: #FFFFFF;
    background-color:#4B0082;
}
table.timeline tr{
    position:relative;
    background-color:#FFFFFF;
}
#flash {
    display:none;
}
#dashboard {
    width:440px;
    margin-left: auto ;
    margin-right: auto ;
}
#table_header {
    background-color:#D3E7F5;
}
#msg_area{
    height: 30px;
}
.normal {color: green;}
.error {color: red;}   
</style>
</head>

<body>

<div id="dashboard">

<div id="msg_area">&nbsp;Test message</div>

<table class="comment_box" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td><input type="text" id="title" name="title" size="30" maxlength="35"/></td>
<td><select id="type" name="type">
  <option value="PR">Presidential</option>
  <option value="VP">Vice-presidential</option>
  <option value="SN">Senatorial</option>
</select></td>
<td><input type="button" value="Create Map" id="create_map" name="create_map"/></td>
</tr>
</table>

<div id="space">&nbsp;</div>

<table id="update" class="timeline" width="100%">
<th>Map Title</th><th>Type</th><th>Actions</th>
</table>

<div id="flash" align="left"  ><img src="images/ajax-loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Comment...</span></div>

</div>

</body>
</html>
